<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_新增背景模型属性_origin</title>
</head>
<style>
  .box1{
    width: 400px;
    height: 400px;
    background-color: skyblue;
    margin: 0 auto;
    font-size: 40px;
    padding: 50px;
    border: 50px dashed rgba(255,0,0,0.4);
    text-align: center;
    line-height: 400px;
    background-image: url("../../resource/韩立1.png");/*背景图默认的起始位置为padding的左上角开始铺开*/
    background-repeat: no-repeat;
  }
  .box2{
    width: 400px;
    height: 400px;
    background-color: skyblue;
    margin: 0 auto;
    font-size: 40px;
    padding: 50px;
    border: 50px dashed rgba(255,0,0,0.4);
    text-align: center;
    line-height: 400px;
    background-image: url("../../resource/韩立1.png");
    background-repeat: no-repeat;
    background-origin: content-box;/*背景图默认的起始位置为content区域的左上角开始铺开*/
  }
  .box3{
    width: 400px;
    height: 400px;
    background-color: skyblue;
    margin: 0 auto;
    font-size: 40px;
    padding: 50px;
    border: 50px dashed rgba(255,0,0,0.4);
    text-align: center;
    line-height: 400px;
    background-image: url("../../resource/韩立1.png");
    background-repeat: no-repeat;
    background-origin: border-box;/*背景图默认的起始位置为border的左上角开始铺开*/
  }
</style>
<body>
<div class="box1">你好啊</div>
<hr>
<div class="box2">你好啊</div>
<hr>
<div class="box3">你好啊</div>
</body>
</html>